<template>
  <div class="indent">
    <div class="title">
      <p>
        <span class="bg-Img sureImg" :class="{'active': details.payStatus === '支付失败'}"
        v-show="removeSuer"></span>
        <span>{{ details.payStatus }}</span>
      </p>
    </div>
    <div class="indent-ct">
      <div class="ct">
        <span class="ct-left">订单号：</span>
        <span class="ct-right">{{ details.outTradeNo }}</span>
      </div>
      <div class="ct">
        <span class="ct-left">支付时间：</span>
        <span class="ct-right">{{ details.payTimes }}</span>
      </div>
      <div class="ct">
        <span class="ct-left">商品名称：</span>
        <span class="ct-right">{{ details.goodsName }}</span>
      </div>
      <div class="ct">
        <span class="ct-left">金额：</span>
        <span class="ct-right">{{ details.totalFee/100 | currency "" }}元</span>
      </div>
      <div class="ct">
        <span class="ct-left">{{ fontOne }}：</span>
        <span class="ct-right">{{ details.goodsNum }}{{ font }}</span>
      </div>
      <!-- <div class="ct">
        <span class="ct-left">发票类型：</span>
        <span class="ct-right">{{ details.invoiceType }}</span>
      </div>
      <div class="ct">
        <span class="ct-left">收货人姓名：</span>
        <span class="ct-right">{{ details.consigneeName }}</span>
      </div>
      <div class="ct">
        <span class="ct-left">收货人电话：</span>
        <span class="ct-right">{{ details.consigneePhone }}</span>
      </div>
      <div class="ct">
        <span class="ct-left">收货人地址：</span>
        <span class="ct-right">{{ details.consigneeAddress }}</span>
      </div> -->
    </div>
  </div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import {AJAX} from "../methods/query.js";
  export default {
    data() {
      return {
        orderId: this.$route.query.orderId,
        loading: false,
        dialog: false,
        removeSuer: true,
        details: {},
        fontOne: "",
        font: "月份"
      };
    },
    async ready() {
      let getOrder = await AJAX.getOrder(this.orderId);
      this.details = getOrder.resInfo;
      if (this.details.goodsModule === "3") {
        this.fontOne = "总月份";
      } else {
        this.fontOne = "数量";
        this.font = " ";
      }
      if (this.details.payStatus === "10") {
        this.details.payStatus = "支付成功";
      } else if (this.details.payStatus === "20") {
        this.details.payStatus = "支付失败";
      } else {
        this.details.payStatus = "";
      }
      console.log(getOrder);
    },
    components: {
      Toast,
      Dialog
    }
  };
</script>
<style scoped lang="less">
  .indent{
    font-size: .6rem;
    .title{
      text-align: center;
      font-size: 1rem;
      padding:.5rem 0;
      color: #15A1D6;
      background-color: #fff;
      border-bottom: 1px dotted #eee;
      .bg-Img{
        display: inline-block;
        width:1.2rem;
        height:1.2rem;
        vertical-align:middle;
        img{
          width: 100%;
          height:auto;
        }
      }
      .sureImg{
        background-image: url(../images/icon_yes_active.png);
        background-size: 100% auto;
        &.active{
          background-image: url(../images/icon_no.png);
        }
      }
    }
    .indent-ct{
      color:#404040;
      .ct{
        background-color: #fff;
        padding: .5rem .3rem 0 .3rem;
        .ct-left{
          display: inline-block;
          width: 30%;
          vertical-align:text-top;
          padding-right: .5rem;
        }
        .ct-right{
          width: 67%;
          vertical-align:text-top;
          display: inline-block;
          padding-right: .5rem;
        }
      }
      .ct:last-of-type{
        padding-bottom: 3rem;
      }
    }
  }
</style>
